<template>
    <div>
        <Header></Header>
        <el-row>
            <el-col :span="12">
                <el-form
                        :model="queryParams"
                        size="small"
                        :inline="true"
                >
                    <el-form-item prop="siteName">
                        <el-date-picker
                            v-model="queryParams.hourTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:00:00"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-upload
                        ref="upload"
                        action="#"
                        :multiple="false"
                        :limit="1"
                        :on-change="handleChange"
                        accept=".xlsx, .xls"
                        :file-list="fileList"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
                </el-upload>
            </el-col>
        </el-row>

        <div class="login_header">
            <span style="font-size: 25px;font-weight: bold">{{currentMouth}}月{{currentDate}}日（截至{{currentHour}}时）温江、郫都区空气质量情况</span><br>
        </div>
        <div class="login_center" >
                <!--                :header-cell-style="{'text-align':'center'}"-->
            <el-table
                      :data="tableData['临江区']"
                      :span-method="objectSpanMethod"
                      :header-cell-style="headerMethod"
                      :cell-style="{'text-align':'center'}"
                      style="width: 100%">
                <el-table-column
                        prop="countyName"
                        label="区县"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="siteName"
                        label="站点"
                        width="120">
                </el-table-column>
                <el-table-column :label="this.dynamicLabel.x">
                    <el-table-column
                            prop="pm25"
                            label="PM2.5">
                    </el-table-column>
                    <el-table-column
                            prop="pm10"
                            label="PM10">
                    </el-table-column>
                    <el-table-column
                            prop="no2"
                            label="NO2">
                    </el-table-column>
                    <el-table-column
                            prop="co"
                            label="CO">
                    </el-table-column>
                    <el-table-column
                            prop="aqi"
                            label="AQI">
                    </el-table-column>
                    <el-table-column
                            prop="pp"
                            label="首污">
                    </el-table-column>
                </el-table-column>
                <el-table-column :label="this.dynamicLabel.y">
                    <el-table-column
                            prop="aqic"
                            label="AQI">
                    </el-table-column>
                    <el-table-column label="首污及浓度">
                        <el-table-column
                                prop="ppc">
                        </el-table-column>
                        <el-table-column
                                prop="ppcv">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="后续控制均值">
                    <el-table-column
                            prop="city"
                            label="PM2.5">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="PM10">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script type="module">
    // const Header = httpVueLoader('components/Header.vue');
    module.exports = {
        data() {
            return {
                queryParams: {
                    hourTime: undefined
                },
                currentMouth: undefined,
                currentDate: undefined,
                currentHour: undefined,
                dynamicLabel: {
                    x: undefined,
                    y: undefined
                },
                tableData: [],
                fileList: []
            };
        },
        created() {
           this.queryParams.hourTime = '2022-11-30 10:00:00'
           this.load()
           this.loadTitle(this.queryParams.hourTime === undefined?new Date():new Date(this.queryParams.hourTime))
        },
        methods: {
            //表单提交
            load() {
                this.query(this.queryParams).then(res => {
                    if (res.status == 200) {
                        if(res.data.code == 200){
                            // this.tableData = res.data.data['临江区'];
                            this.tableData = res.data.data;
                            // console.log(this.tableData)
                        }else{
                            this.$message.error("数据请求错误！");
                        }
                    } else {
                        this.$message.error("请求服务异常！");
                    }
                });
            },
            loadTitle(data) {
                this.currentMouth = data.getMonth() + 1
                this.currentDate = data.getDate()
                this.currentHour = data.getHours()
                this.dynamicLabel.x = "01-"+this.currentHour+"时累计"
                this.dynamicLabel.y = this.currentHour+"时"
            },
            query(data) {
                return axios({
                    url: '/api.data/query',
                    method: 'get',
                    params: data,
                });
            },
            //通过onchanne触发方法获得文件列表
            handleChange(file, fileList) {
                this.fileList = fileList;
            },
            submitUpload() {
                let fd = new FormData();
                fd.append("name",this.name);
                this.fileList.forEach(item=>{
                    //文件信息中raw才是真的文件
                    fd.append("excelFile",item.raw);
                    //console.log(item.raw)
                })

                axios({
                    method: 'post',
                    url: '/api.data/upload',
                    headers: { "Content-Type": "multipart/form-data" },
                    timeout: 30000,
                    data: fd
                }).then(res=>{
                    if (res.status == 200) {
                        if(res.data.code == 200){
                            this.$message({
                                message: '上传成功!',
                                type: 'success'
                            });
                            this.fileUpList = []
                            this.load()
                        }else{
                            this.$message.error("数据请求错误！");
                        }
                    } else {
                        this.$message.error("请求服务异常！");
                    }
                })
            },
            // 获取当前日期时间
            getNowHourTime(){
                var myDate=new Date;
                var year=myDate.getFullYear(); //获取当前年
                var mon=myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1; //获取当前月
                var date=myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate(); //获取当前日
                var hour=myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();//获取当前时
                var minute=myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();//获取当前分
                return year+"-"+mon+"-"+date+" "+hour+":"+"00:00";
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex === 0) {
                        return {
                            rowspan: 10,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 1
                        };
                    }
                }
            },
            headerMethod({ row, column, rowIndex, columnIndex }) {
                const comStyle = { background: '#b1defd', color: '#606266', fontWeight: '800', textAlign: 'center' };
                // 1.1 让第0行的第0列跨2行
                if (rowIndex === 1 && columnIndex === 7) {
                    this.$nextTick(() => {
                        document
                            .getElementsByClassName(column.id)[0]
                            .setAttribute("rowSpan", 2);
                        return comStyle;
                    });
                }
                // 1.2 被覆盖的进行隐藏
                if (rowIndex === 2 && (columnIndex == 7 || columnIndex == 8)) {
                    return {
                        display: "none",
                        ...comStyle,
                    };
                }
                return comStyle;
            },
            // mergeCol(id, rowIndex) { // 合并单元格
            //     // id：属性名
            //     // rowIndex：行索引值
            //     var idName = this.tableData[rowIndex][id] // 获取当前单元格的值
            //     if (rowIndex > 0) { // 判断是不是第一行
            //         // eslint-disable-next-line eqeqeq
            //         if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) { // 先判断当前单元格的值是不是和上一行的值相等
            //             var i = rowIndex; var num = 0 // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
            //             while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //                 if (this.tableData[i][id] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
            //                     i++ // 如果相等，则索引值加1
            //                     num++ // 合并的num计数加1
            //                 } else {
            //                     i = this.tableData.length // 如果不相等，将索引值设置为table的数组长度，跳出循环
            //                 }
            //             }
            //             return {
            //                 rowspan: num, // 最终将合并的行数返回
            //                 colspan: 1
            //             }
            //         } else {
            //             return {
            //                 rowspan: 0, // 如果相等，则将rowspan设置为0
            //                 colspan: 1
            //             }
            //         }
            //     } else { // 如果是第一行，则直接返回
            //         let i = rowIndex; let num = 0
            //         while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //             if (this.tableData[i][id] === idName) {
            //                 i++
            //                 num++
            //             } else {
            //                 i = this.tableData.length
            //             }
            //         }
            //         return {
            //             rowspan: num,
            //             colspan: 1
            //         }
            //     }
            // },
        },
    };
</script>

<style scoped>
  .home {
    font-size: 24px;
    height: 100%;
    background-color: #ffffff;
    /*font-weight: bold;*/
  }

  .el-header,
  .el-footer {
    background-color: #fff;
    color: #fff;
    text-align: left;
    line-height: 60px;
    margin-bottom: 5px;
    box-shadow: 10px 5px 10px #ddd;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-menu,
  .el-container:nth-child(6) .el-menu {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-menu {
    line-height: 320px;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>